<template>
	<el-card>
		<div v-show="!flowVisable">
			<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
				<el-form-item>
					<el-input v-model="state.queryForm.name" placeholder="调度任务名称"></el-input>
				</el-form-item>
				<el-form-item>
					<!-- @change="change" -->
					<el-select v-model="state.queryForm.groupId" placeholder="所属调度组" clearable>
						<el-option v-for="item in state.projectList" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="state.queryForm.groupOwnerId" placeholder="选择负责人" clearable>
						<el-option v-for="item in state.headList" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<fast-select v-model="state.queryForm.runStatus" dict-type="run_status" placeholder="状态" clearable filterable></fast-select>
				</el-form-item>
				<el-form-item>
					<fast-select v-model="state.queryForm.executeType" dict-type="execute_type" placeholder="执行方式" clearable filterable></fast-select>
				</el-form-item>
				<!-- <el-form-item>
					<el-date-picker
						v-model="state.queryForm.startTime"
						type="datetime"
						placeholder="开始时间"
						format="YYYY-MM-DD HH:mm:ss"
						value-format="YYYY-MM-DD HH:mm:ss"
					/>
				</el-form-item>
				<el-form-item>
					<el-date-picker
						v-model="state.queryForm.endTime"
						type="datetime"
						placeholder="结束时间"
						format="YYYY-MM-DD HH:mm:ss"
						value-format="YYYY-MM-DD HH:mm:ss"
					/>
				</el-form-item> -->
				<el-form-item>
					<el-date-picker
						v-model="dateRange"
						type="datetimerange"
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						format="YYYY-MM-DD HH:mm:ss"
						@change="dateChange"
					/>
				</el-form-item>
				<el-form-item>
					<el-button @click="getDataList()">查询</el-button>
				</el-form-item>
				<el-form-item>
					<!-- <el-button v-auth="'data-development:schedule:record:delete'" type="danger" @click="deleteBatchHandle()">删除</el-button> -->
					<el-button v-auth="'data-development:schedule:record:reset'" @click="reset()">重置</el-button>
				</el-form-item>
			</el-form>
			<el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%" @selection-change="selectionChangeHandle">
				<!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> -->
				<el-table-column prop="name" label="调度任务名称" header-align="center" align="center"></el-table-column>
				<el-table-column prop="groupName" label="所属调度组" header-align="center" align="center"></el-table-column>
				<el-table-column prop="groupOwner" label="负责人" header-align="center" align="center"></el-table-column>
				<fast-table-column prop="executeType" label="执行方式" dict-type="execute_type" header-align="center" align="center"></fast-table-column>
				<!-- <el-table-column prop="name" label="执行器" header-align="center" align="center"></el-table-column> -->
				<el-table-column prop="runStatus" label="状态" header-align="center" align="center">
					<template #default="scope">
						<el-tag v-show="scope.row.runStatus == 1">等待中</el-tag>
						<el-tag v-show="scope.row.runStatus == 2" type="warning">运行中</el-tag>
						<el-tag v-show="scope.row.runStatus == 3" type="success">正常结束</el-tag>
						<el-tag v-show="scope.row.runStatus == 4" type="danger">异常结束</el-tag>
					</template>
				</el-table-column>
				<el-table-column show-overflow-tooltip prop="startTime" label="开始时间" header-align="center" align="center"></el-table-column>
				<el-table-column show-overflow-tooltip prop="endTime" label="结束时间" header-align="center" align="center"></el-table-column>
				<!-- <el-table-column prop="log" label="运行日志" header-align="center" align="center"></el-table-column> -->
				<el-table-column prop="createTime" label="创建时间" header-align="center" align="center"></el-table-column>
				<el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
					<template #default="scope">
						<el-button type="primary" link @click="queryDetail(scope.row)">详情</el-button>
						<el-button :disabled="scope.row.runStatus != '2'" type="danger" link @click="stopAcess(scope.row.id)">停止</el-button>
						<!-- <el-button
							v-if="scope.row.runStatus == 3 || scope.row.runStatus == 4"
							v-auth="'data-development:schedule:record:delete'"
							type="primary"
							link
							@click="deleteBatchHandle(scope.row.id)"
							>删除</el-button
						> -->
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:current-page="state.page"
				:page-sizes="state.pageSizes"
				:page-size="state.limit"
				:total="state.total"
				layout="total, sizes, prev, pager, next, jumper"
				@size-change="sizeChangeHandle"
				@current-change="currentChangeHandle"
			>
			</el-pagination>
		</div>
		<div class="scheduleRecordDivClass" v-if="flowVisable">
			<div class="drawerClass" style="height: 100%">
				<el-drawer :show-close="false" size="100%" show-close v-model="flowVisable" direction="rtl" :modal="false">
					<!-- :close-on-click-modal="false"
					:destroy-on-close="true" -->
					<div class="detailWrap">
						<p>
							<span>调度任务名称：</span><span>{{ stateTwo.message.name }}</span>
						</p>
						<p>
							<span>所属调度组：</span>
							<span>{{ stateTwo.message.groupName }}</span>
						</p>
					</div>
					<el-button class="btnReturn" @click="btnReturnFun">返回</el-button>
					<FlowDetail ref="flowDetailRef"></FlowDetail>
					<!-- <FlowDetail v-if="state.isFlow == true" ref="flowDetailRef"></FlowDetail>
					<Flow v-if="state.isFlow == false" ref="flowRef"></Flow> -->
				</el-drawer>
			</div>
		</div>
	</el-card>
</template>

<script setup lang="ts" name="Data-developmentSchedule-recordIndex">
import { useCrud } from '@/hooks'
import { reactive, ref, onMounted } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import FlowDetail from './flow-detail-Two.vue'
import Flow from './flow-detail-Two.vue'
import { ElMessage, ElMessageBox } from 'element-plus/es'
import { ScheduleGroupList } from '@/api/auth-hm'
import timeFormater from 'time-formater'
import { stopSchedule } from '@/api/data-development/schedule'

const state: IHooksOptions = reactive({
	dataListUrl: '/data-development/schedule/record/page',
	deleteUrl: '/data-development/schedule/record',
	queryForm: {
		name: '',
		groupId: '',
		groupOwnerId: '',
		runStatus: '',
		executeType: '',
		startTime: '',
		endTime: ''
	},
	projectList: [],
	headList: [],
	isFlow: false
})
const stateTwo = reactive({
	message: {}
})
const reset = () => {
	state.queryForm.name = ''
	state.queryForm.groupId = ''
	state.queryForm.groupOwnerId = ''
	state.queryForm.runStatus = ''
	state.queryForm.executeType = ''
	state.queryForm.startTime = ''
	state.queryForm.endTime = ''
	dateRange.value = []
	getDataList()
}
const dateChange = val => {
	state.queryForm.startTime = dateRange.value ? timeFormater(dateRange.value[0]).format('YYYY-MM-DD HH:mm:ss') : ''
	state.queryForm.endTime = dateRange.value ? timeFormater(dateRange.value[1]).format('YYYY-MM-DD HH:mm:ss') : ''
}
const dateRange = ref([])
const flowVisable = ref(false)
const flowRef = ref()
const flowDetailRef = ref()
onMounted(() => {
	ScheduleGroupListFun()
})
const ScheduleGroupListFun = () => {
	ScheduleGroupList({}).then((res: any) => {
		if (res.code == 0) {
			let dataList = res.data && res.data.length > 0 ? res.data : []
			let dataObj = []
			let dataObjTwo = []
			for (let i = 0; i < dataList.length; i++) {
				let obj = {
					value: '',
					label: ''
				}
				let objTwo = {
					value: '',
					label: ''
				}
				obj.value = dataList[i].id
				obj.label = dataList[i].groupName
				objTwo.value = dataList[i].id
				objTwo.label = dataList[i].groupOwner
				dataObj.push(obj)
				dataObjTwo.push(objTwo)
			}
			state.projectList = dataObj
			state.headList = dataObjTwo
		} else {
			ElMessage.error(res.msg)
		}
	})
}
// const change = item => {
// 	getDataList()
// }
const queryDetail = (row: any) => {
	stateTwo.message = row
	// if (row.runStatus == 1 || row.runStatus == 2) {
	// 	ElMessage.warning('请等待任务运行完毕再查看详情结果！')
	// 	return
	// }
	// if (row.configJson) {
	// 	flowVisable.value = true
	// 	state.isFlow = true
	// 	initFlowDetailRef(row.taskScheduleId)
	// } else {
	// 	flowVisable.value = true
	// 	state.isFlow = false
	// 	initFlowRef(row.taskScheduleId, row.runStatus != 1 && row.runStatus != 2)
	// }
	flowVisable.value = true
	initDetailRef(row)
}
const initDetailRef = async row => {
	if (flowDetailRef.value) {
		await flowDetailRef.value.init(row.taskScheduleId)
		// 查看
		await flowDetailRef.value.runFlow(row)
		return
	}
	setTimeout(() => {
		initDetailRef(row)
	}, 500)
}
const btnReturnFun = () => {
	flowVisable.value = false
}

const stopAcess = (id) => {
	ElMessageBox.confirm('确认停止任务吗？', '警告', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			stopSchedule(id).then((res) => {
				ElMessage.success('停止成功')
				getDataList()
			})
		})
		.catch(() => {})
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)
</script>

<style lang="scss">
.scheduleRecordDivClass {
	height: calc(100vh - 170px);
	/* :deep .el-overlay {
			position: absolute;
		} */
	position: relative;
	overflow: hidden;
}
.scheduleRecordDivClass > .drawerClass > div {
	height: 100%;
	position: absolute !important;
	overflow: hidden;
}
.scheduleRecordDivClass .drawerClass .el-drawer__header {
	height: 5%;
}
.scheduleRecordDivClass .drawerClass .el-drawer__body {
	height: 95%;
	padding: 0;
}
/* 占比el-drawer__body的100% */
.scheduleRecordDivClass .drawerClass .el-drawer__body .el-card {
	height: 100%;
}
.scheduleRecordDivClass .drawerClass .el-drawer__body .el-card .el-card__body {
	padding: 6px;
	height: 100%;
}

.scheduleRecordDivClass .drawerClass .detailWrap {
	position: absolute;
	top: 8px;
	left: 0;
}
.scheduleRecordDivClass .drawerClass .detailWrap p {
	display: inline-block;
	vertical-align: middle;
	&:nth-child(2) {
		margin-left: 30px;
	}
}
.scheduleRecordDivClass .drawerClass .btnReturn {
	position: absolute;
	top: 0px;
	right: 0;
}
</style>
